<template>
  <div class="app-container">
    <!-- 左侧固定Aside -->
    <el-aside class="app-aside" :width="isCollapse ? '64px' : '220px'">
      <!-- Aside内容保持不变 -->
      <Aside :isCollapse="isCollapse" />
    </el-aside>

    <!-- 右侧主区域 -->
    <div class="main-container">
      <!-- 头部固定在顶部 -->
      <el-header class="app-header">
        <!-- Header内容 -->
        <Header :isCollapse="isCollapse" @toggleCollapse="toggleCollapse" />
      </el-header>

      <!-- 内容区域 -->
      <el-main class="app-main">
        <router-view />
      </el-main>
      <Footer></Footer>
    </div>
  </div>
</template>

<script setup>
import Header from '@/components/layout/Header.vue'
import Footer from '@/components/layout/Footer.vue'
import Aside from "@/components/layout/Aside.vue";
</script>
<style scoped>
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.app-aside {
  height: 100vh;
  overflow-y: auto;
  transition: width 0.3s;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
}

.main-container {
  flex: 1;
  margin-left: 220px; /* 初始宽度与Aside一致 */
  transition: margin-left 0.3s;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 999;
}

.app-main {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* 侧边栏折叠时的调整 */
.is-collapse .main-container {
  margin-left: 64px;
}
</style>